<!-- 模板 -->
<template>
    <div class="pagination-container">
      <!-- sync原理 -->
      <!-- 解决的问题：父组件向子组件传递数据的方式是props，
      但是它的局限在于数据只能单向传递，子组件不能直接修改prop属性。 -->
      <!-- 解决方案：vue提供一种语法糖，使用sync，它可以触发父组件传递的prop方法 -->
      <!-- 用法：
          父组件props传递时使用sync修饰，如：:page.sync="listQuery.page"
          子组件中通过，this.$emit('update:page',val)触发父组件修改prop变量page
      注释：父组件中并没有定义update的事件，但是却可以完成prop属性修改page，这里就是sync语法糖的作用 -->
      <!-- v-bind="$attrs"介绍
        解决的问题：
            1、通过props和$emit的传值方式，如果出现多层嵌套，这个时候需要层层传递，会非常的麻烦
            2、使用vuex，但是某些组件的属性状态并非全局状态，造成了浪费
            3、使用中央时间广播总线bus
        解决方案：
            组件中使用v-bind="$attrs"，$sttrs属性，可以使未被props识别的属性，可以通过它继续传入内部组织
            组件中使用v-on="$listeners",$listeners属性，可以使未被识别的属性，可以通过它继续传入内部组件。 -->
          <el-pagination 
              :background="background"
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange" 
              :current-page.sync="currentPage"
              :page-sizes="pageSizes" 
              :page-size.sync="pageSize" 
              :layout="layout" 
              :total="total"
              v-bind="$attrs">
          </el-pagination>
    </div>
  </template>
  <script >
  export default {
      name: 'Pagination',
      data() {
        return{
        }
      },
      props:{
          background: {
              type: Boolean,
              default: true
          },
          total: {
              type: Number,
              default: 1
          },
          page: {
              type: Number,
              default: 1
          },
          limit: {
              type: Number,
              default: 2
          },
          pageSizes: {
              type: Array,
              default(){
                  return [2,4,6,8]
              }
          },
          layout: {
              type:String,
              default: 'total, sizes, prev, pager, next, jumper'
          }
      },
      computed: {
          currentPage:{
              get(){
                  return this.page
              },
              set(val){
                  this.$emit('update:page',val)
              }
          },
          pageSize: {
              get(){
                  return this.limit
              },
              set(val){
                  this.$emit('update:page',val)
              }
          }
      },
      components: {},
      created() {
          // 数据初始化
      },
      mounted() {
      },
      methods:{
          handleSizeChange(val){
              this.$emit('pagination',{page: this.currentPage, limit: val})
          },
          handleCurrentChange(val){
              this.$emit('pagination',{page: val, limit: this.pageSize})
          }
      }
    };
  </script>
  <style lang='scss'>
  </style>
  